/**
* 左边菜单
*/
<template>
    <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path"
             unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
             active-text-color="#ffd04b">
        <div class="logobox">
            <img class="logoimg" src="../assets/img/logo.png" alt="">
        </div>
        <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
            <template slot="title">
                <i class="iconfont" :class="menu.icon"></i>
                <span>{{menu.menuname}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item v-for="chmenu in menu.menus"
                              :index="'/'+chmenu.url"
                              :key="chmenu.menuid"
                              :default-active="$route.path">
                    <i class="iconfont" :class="chmenu.icon"></i>
                    <span>{{chmenu.menuname}}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<script>
    import {menu} from '../api/userMG'

    export default {
        name: 'leftnav',
        data() {
            return {
                collapsed: false,
                allmenu: []
            }
        },
        // 创建完毕状态(里面是操作)
        created() {
            let res = {
                success: true,
                data: [
                    {
                        icon: '',
                        menuname: '信息核审',
                        hasThird: null,
                        url: null,
                        menus: [
                            {
                                icon: '',
                                menuname: '机构信息核审',
                                hasThird: 'N',
                                url: 'getCheck',
                                menus: null
                            },
                            {
                                icon: '',
                                menuname: '手机号核审',
                                hasThird: 'N',
                                url: 'mobileCheckList',
                                menus: null
                            }
                        ]
                    },
                    {
                        icon: '',
                        menuname: '问卷管理',
                        hasThird: null,
                        url: null,
                        menus: [
                            {
                                icon: '',
                                menuname: '问卷列表',
                                hasThird: 'N',
                                url: 'quesManage',
                                menus: null
                            }
                        ]
                    },
                    {
                        icon: '',
                        menuname: '指标计算',
                        hasThird: null,
                        url: null,
                        menus: [
                            {
                                icon: '',
                                menuname: '调研数据',
                                hasThird: 'N',
                                url: 'dataVisual',
                                menus: null
                            },
                            {
                                icon: '',
                                menuname: '模型定义',
                                hasThird: 'N',
                                url: 'model',
                                menus: null
                            }
                        ]
                    },
                    {
                        icon: '',
                        menuname: '用户及权限管理',
                        hasThird: null,
                        url: null,
                        menus: []
                    }
                ],
                msg: 'success'
            };

            this.allmenu = res.data;
            console.log("res=>", res);
            console.log("this.allmenu=>", this.allmenu);

        }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 240px;
        min-height: 400px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        border: none;
        text-align: left;
    }

    .el-menu-item-group__title {
        padding: 0px;
    }

    .el-menu-bg {
        background-color: #1f2d3d !important;
    }

    .el-menu {
        border: none;
    }

    .logobox {
        height: 40px;
        line-height: 40px;
        color: #9d9d9d;
        font-size: 20px;
        text-align: center;
        padding: 20px 0px;
    }

    .logoimg {
        height: 40px;
    }

    .el-icon-s-order:before {
        font-size: 22px;
    }
</style>